<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="app">
        <div class="header">
            <h1>小黑记事本</h1>
            <!-- 我们需要监听输入了什么 所有所有v-model -->
            <input v-model="inpVal" placeholder="请输入任务" class="new-todo" />
            <button @click="add" class="add">添加任务</button>
        </div>
        <div class="main">
            <ul class="todo-list">
                <!-- 使用v-for -->
                <li class="todo" v-for="(item,index) in list" :key="item.id">
                    <div class="view">
                        <span class="index">{{ index+1 }}</span> <label>{{ item.mission }}</label>
                        <!-- 删除按钮 我们拿id值去做判断 -->
                        <button @click="del(item.id)" class="destroy"></button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer">
            <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
            <button class="clear-completed" @click="clear">
                清空任务
            </button>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                // 先来一个数组存数据
                list: [
                    // 我们用时间戳代替id
                    { id: Date.now(), mission: '跑步' },
                ],
                // 双向数据绑定 表单的value
                inpVal: '',
            }
        },
        methods: {
            // 点击按钮添加
            add() {
                // 我们要做判断 如果为空就不能继续执行下去
                if (!this.inpVal) {
                    return alert('表单内容不能为空!')
                }
                // 点击的时候我们拿到v-model 我们使用unshift去操作 list
                this.list.unshift({
                    id: Date.now(),
                    mission: this.inpVal
                })
                this.inpVal = ''
            },
            // 删除
            del(id) {
                // 使用到filter过滤出数据
                this.list = this.list.filter(item => item.id !== id)
            },
            // 清空
            clear() {
                this.list = []
            }
        },
    })
</script>

</html>